<template>
  <box-card :show-search="false">
    <div slot="operator">
      <el-button v-if="!editable" icon="el-icon-edit" type="primary" size="mini" @click="handleEdit">编辑</el-button>
      <el-button v-if="editable" icon="el-icon-circle-check" type="primary" size="mini" @click="handleSubmit">保存
      </el-button>
      <el-button v-if="editable" icon="el-icon-circle-close" type="info" size="mini" @click="handleCancel">取消
      </el-button>
    </div>
    <div slot="content">
      <el-form v-if="editable" ref="form" :model="formdata" :rules="formrules" label-suffix="：" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户账号" prop="username">
              <el-input v-model="formdata.username" :disabled="true" maxlength="30"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名" prop="name">
              <el-input v-model="formdata.name" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型" prop="type">
              <el-select v-model="formdata.type" disabled placeholder="请选择用户类型" style="width: 100%">
                <el-option v-for="item in localDict.user_type" :key="item.value" :disabled="item.group==='develop'"
                           :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户状态" prop="status">
              <el-select v-model="formdata.status" disabled placeholder="请选择用户状态" style="width: 100%">
                <el-option v-for="item in localDict.user_status" :key="item.value" :label="item.label"
                           :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobile">
              <el-input v-model="formdata.mobile" maxlength="11"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formdata.email" maxlength="50"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注说明" prop="remark">
          <el-input v-model="formdata.remark" placeholder="请输入备注说明" rows="4" type="textarea"/>
        </el-form-item>
      </el-form>
      <el-descriptions v-else :class="['description']" :column="2" contentClassName="content" labelClassName="label">
        <el-descriptions-item label="用户账号">{{ model.code }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ model.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ model.mobile }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ model.email }}</el-descriptions-item>
        <el-descriptions-item label="用户类型">
          <dict-tag :options="localDict.user_type" :value="model.type" show-label/>
        </el-descriptions-item>
        <el-descriptions-item label="用户状态">
          <dict-tag :options="localDict.user_status" :value="model.status"/>
        </el-descriptions-item>
        <el-descriptions-item v-if="model.userType=== '00'" label="任职部门">
          {{ model.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="工号">{{ model.workNo }}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ model.createTime }}</el-descriptions-item>
        <el-descriptions-item label="备注说明" span="2">{{ model.remark }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </box-card>
</template>
<script>
import {getUserProfile, updateUserProfile} from "../../../../api/profile";
import {getStaticData} from "../../../../api/common";

export default {
  name: "UserInfoCard",
  props: {},
  data() {
    return {
      model: {},
      loading: false,
      editable: false,
      formdata: {},
      formrules: {},
      localDict: {
        user_sex: [],
        user_type: [],
        user_status: []
      }
    }
  },
  created() {
    this.getLocalDict()
    this.getProfile()
  },
  methods: {
    getLocalDict() {
      getStaticData("system-user-sex").then(res => {
        this.localDict.user_sex = res.data
      })
      getStaticData('system-user-type').then(res => {
        this.localDict.user_type = res.data
      })
      getStaticData('system-user-status').then(res => {
        this.localDict.user_status = res.data
      })
    },
    getProfile() {
      getUserProfile().then(response => {
        this.model = response.data;
      })
    },
    handleEdit() {
      this.editable = true
      this.formdata = {...this.model}
      this.$set(this.formdata, "roleIds", this.model.roles.map(obj => obj.id));
    },
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserProfile(this.formdata).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.$emit('reload')
            this.editable = false
          });
        }
      });
    },
    handleCancel() {
      this.editable = false
    },
  }
}

</script>
<style scoped lang="scss">
@import "../../../../assets/styles/variables";

::v-deep.box-card {
  .el-card__header {
    height: 40px;
    padding: 5px 15px;
  }

  .box-header {
    font-size: $base-title-font-size;

    .box-operator {
      float: right;
    }
  }
}
</style>
